/* items y acciones del menu */
/* *************************************************
**** GLOBAL ****************************************
************************************************* */
html, body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

body {
  font-family: 'Courier';
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: snow;
  padding: 14px;
  font-size: 110%; }

img {
  width: auto;
  max-width: 100%;
  height: auto; }

/* *************************************************
**** PORTADA ***************************************
************************************************* */
#coverPage {
  text-align: center; }

#coverTitle {
  color: initial;
  font-weight: bolder;
  font-size: 140%; }

#coverCast {
  color: initial;
  font-size: 70%; }

#coverDescription {
  color: initial;
  margin-top: 12px;
  margin-bottom: 12px; }

.coverButton {
  color: black;
  background-color: lightgray;
  margin: 8px;
  padding: 4px; }

.coverButton:hover {
  color: "initial";
  background-color: lightsteelblue; }

/* *************************************************
**** ESCENA ****************************************
************************************************* */
#sceneText {
  margin-top: 18px;
  margin-bottom: 18px; }

#sceneImage {
  text-align: center; }

#sceneDecisions {
  /*text-align: center;*/ }

#sceneDecisions > div > * {
  /*pointer-events: none;*/ }

.Decision {
  margin-bottom: 20px; }

#sceneDecisions > div > span {
  background-color: lightgray;
  padding: 4px; }

#sceneDecisions > div > span:hover {
  background-color: lightsteelblue; }

/* *************************************************
**** MENU ******************************************
************************************************* */
.UserMenuButton {
  color: black;
  background-color: lightgray;
  padding: 6px; }

.UserMenuButton:hover {
  color: "initial";
  background-color: lightsteelblue; }

#useItemQuestion, #combineItemQuestion {
  padding-top: 6px;
  font-style: italic; }

#inventory > div[name=item], #actions > div[name=action] {
  color: black;
  background-color: lightgray;
  padding: 6px; }

#inventory > div[name=item]:hover, #actions > div[name=action]:hover {
  color: "initial";
  background-color: lightsteelblue; }

#itemActions > div {
  color: black;
  background-color: #ece9e9;
  padding: 6px; }

#itemActions > div:hover {
  color: "initial";
  background-color: lightsteelblue; }

#combineItemActions > div {
  color: black;
  background-color: #ece9e9;
  padding: 6px; }

#combineItemActions > div:hover {
  color: "initial";
  background-color: lightsteelblue; }

.ItemToCombine {
  text-decoration: underline; }

#userScore {
  padding: 6px; }

/* *************************************************
**** MENSAJES DE USUARIO ***************************
************************************************* */
#userDialog {
  display: none;
  padding: 18px;
  background-color: #c8e6c8; }

/* Responsive fonts, taken from:
https://websemantics.uk/tools/responsive-font-calculator */
/* 20px @ 480px increasing to 32px @ 1920px */
@media (min-width: 480px) {
  :root {
    /* Where: * 0.8333 = 100 * font_Size_Difference / viewport_Width_Difference */
    font-size: calc(1.625rem + ((1vw - 4.8px) * 0.4167));
    /* Where: * 0.4167 = 100 * font_Size_Difference / viewport_Width_Difference */ } }

/* Prevent font scaling beyond this breakpoint */
@media (min-width: 1920px) {
  :root {
    font-size: 32px; } }